<template>
	<div class="about">
		<app-bar ref="AppBar" title="关于页面" right-text="关闭" left-text="返回" :appBarStyles="{backgroundColor:'#00ffff'}"
			@click-left="onClickNavLeft" @click-right="onClickNavRight" @click-title="onClickNavTitle">
		</app-bar>
		<div class="page-view" ref="pageView">
			<h1>This is an about page</h1>
			<van-divider></van-divider>
			<div>
				<van-button type="info" size="large" @click="onClickNavLeft">返回上一页</van-button>
				<van-button type="primary" size="large" @click="openOtherLink">跳转下一页面</van-button>
			</div>
		</div>
		
	</div>
</template>
<script>
	import AppBar from '../components/AppBar.vue'
	export default {
		name: 'AboutView',
		components: {
			AppBar
		},
		created() {
			console.log('about 页创建了');
			this.init();
		},
		activated() {
			console.log('about 页激活了');
		},
		methods: {
			init(){
				// 获取appbar高度，从而能正确设置局部滚动盒子的高度
				this.$nextTick(()=>{
					const appBarHeight = this.$refs.AppBar.barHeight;
					this.$refs.pageView.style.height = `calc(100vh - ${appBarHeight})`;
				})
			},
			onClickNavLeft() {
				xwbridge.windowHistoryBack();
			},
			onClickNavRight() {
				xwbridge.windowClose();
			},
			onClickNavTitle() {
				alert("点击了导航栏标题")
			},
			openOtherLink() {
				// const f = document.createElement('iframe');
				this.$router.push({
					path: '/full'
				})
			}
		}
	}

	function getLineNumber() {
		return new Error().stack;
	}
</script>

<style scoped>
.page-view{
	text-align: center;
	width: 100%;
	overflow: scroll;
}
</style>

